<template>
  <div class="app">
    <div class="header">
<!--      搜索商品-->
      <div class="search">
        <el-input v-model="input" placeholder="请输入内容" style="width: 150px"/>
        <el-button type="primary" style="margin: 0 100px 0 10px" @click="getFlowerInfo">搜索</el-button>
      </div>
<!--      添加商品-->
      <div class="add">
        <el-button type="primary"  @click="openDra" >添加商品</el-button>
        <el-drawer
          :visible.sync="drawer"
          title="商品详情 ">
            <el-form ref="form" :model="flower1" label-width="80px">
              <el-form-item label="商品名称">
                <el-input v-model="flower1.flowerName" style="width: 60%"></el-input>
              </el-form-item>
              <el-form-item label="商品类型">
                <el-input v-model="flower1.type" style="width: 60%"></el-input>
              </el-form-item>
              <el-form-item label="商品价格"
                            :rules="[{ required: true, message: '价格不能为空'},{ type: 'number', message: '价格必须为数字值'}]"
              >
                <el-input v-model="flower1.price" style="width: 60%"></el-input>
              </el-form-item>
              <el-form-item label="商品成本" :rules="[{ required: true, message: '价格不能为空'},{ type: 'number', message: '价格必须为数字值'}]">
                <el-input v-model="flower1.costPrice" style="width: 60%"></el-input>
              </el-form-item>
              <el-form-item label="商品库存" :rules="[{ required: true, message: '价格不能为空'},{ type: 'number', message: '价格必须为数字值'}]">
                <el-input v-model="flower1.inventory" style="width: 60%"></el-input>
              </el-form-item>
              <el-form-item label="风格标签">
                <el-input v-model="flower1.tag" style="width: 60%"></el-input>
              </el-form-item>
              <el-form-item label="详细描述">
                <el-input type="textarea" v-model="flower1.moreInfo" style="width: 60%" :rows="7" ></el-input>
              </el-form-item>
              <el-form-item align="center" style="position: fixed">
                  <el-button type="primary" @click="onSubmit">立即创建</el-button>
                  <el-button @click="drawer = false">取消</el-button>
              </el-form-item>
            </el-form>
        </el-drawer>
      </div>
<!--      修改商品-->
      <div class="update">
        <el-drawer
          :visible.sync="drawerU"
          title="商品详情 ">
          <el-form ref="form" :model="flower2" label-width="80px">
            <el-form-item label="商品名称">
              <el-input v-model="flower2.flowerName" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="商品类型">
              <el-input v-model="flower2.type" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="商品价格"
                          :rules="[{ required: true, message: '价格不能为空'},{ type: 'number', message: '价格必须为数字值'}]"
            >
              <el-input v-model="flower2.price" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="商品成本" :rules="[{ required: true, message: '价格不能为空'},{ type: 'number', message: '价格必须为数字值'}]">
              <el-input v-model="flower2.costPrice" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" :rules="[{ required: true, message: '价格不能为空'},{ type: 'number', message: '价格必须为数字值'}]">
              <el-input v-model="flower2.inventory" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="风格标签">
              <el-input v-model="flower2.tag" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="详细描述">
              <el-input type="textarea" v-model="flower2.moreInfo" style="width: 60%" :rows="7" ></el-input>
            </el-form-item>
            <el-form-item align="center" style="position: fixed">
              <template slot-scope="scope">
                <el-button type="primary" @click="saveFlower">保存</el-button>
                <el-button @click="drawerU = false">取消</el-button>
              </template>
            </el-form-item>
          </el-form>
        </el-drawer>
      </div>
    </div>
<!--    页面底部分页-->
    <div style="position: fixed;bottom: 20px;">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page="currentpage"
        :total="total">
      </el-pagination>
    </div>
<!--    页面主体部分-->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="flowerName"
        label="产品名称"
      >
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
       >
      </el-table-column>
      <el-table-column
        prop="costPrice"
        label="成本"
        >
      </el-table-column>
      <el-table-column
        prop="inventory"
        label="库存"
        >
      </el-table-column>
      <el-table-column
        prop="tag"
        label="风格标签"
        >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.tag"
            :type="scope.row.tag === '好看' ? 'primary' : 'plain'"
            disable-transitions>{{scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="图片上传" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="showPhoto(scope.row)">查看</el-button>
          <el-button size="mini" @click="addPhoto(scope.row)">上传</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="openEdit(scope.row)" size="small">编辑</el-button>
          <el-button type="danger" @click="deleteFlower(scope.row)"  size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--上传的盒子-->
    <el-drawer
      title="图片上传"
      :visible.sync="picture"
      :with-header="false"
      >
      <el-upload
        action
        list-type="picture-card"
        :auto-upload = true
        :on-preview="handlePictureCardPreview"
        :http-request="uploadPhoto"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
<!--      预览窗口-->
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-drawer>
<!--    显示图片的盒子-->
    <el-dialog :visible.sync="dialogVisible1">
      <div class="demo-image__lazy">
        <div v-for="url in urls" :key="url">
          <el-image :src="url" lazy></el-image>
          <el-button @click="deletePic(url)">删除</el-button>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import FlowerApi from '@/api/Flower/flower'

export default {
  data() {
    return {
      tableData: [],
      currentPage:1,
      total:0,
      currentpage:1,
      input:'',
      drawer: false,//显示隐藏
      direction: 'rtl',//右方打开
      flower1:{},//上传
      flower2:{},//修改
      picture: false,
      dialogImageUrl: '',
      dialogVisible: false,
      flowerId:0,//当前行id
      dialogVisible1:false,
      urls:[],//图片链接（数组）
      drawerU:false//修改商品的弹框
    }
  },
  mounted() {
    // 初始化调用
    this.getFlowerList(1)
  },
  methods: {
    // 删除图片
    deletePic(url){
      const flower = {
        id:null,
        flowerId:null,
        pictureLocation:url}
      // todo 图片无法获取完整对象
      // FlowerApi.deletePicuter(flower)
    },
    //修改商品属性
    saveFlower(){
      // 用qs框架把json格式对象转换为FormData格式
      let flower = this.qs.stringify(this.flower2)
      console.log(flower);
      // console.log(typeof (flower))
      FlowerApi.handleFlower(flower)
        .then(response =>{
          console.log(response)
        })

    },
    //打开编辑的对话框
    openEdit(row){
      this.flower2 = row
      this.drawerU = true
    },
    //打开添加商品的对话框
    openDra(){
      this.drawer = true
      //置空表单
    },
    //删除商品
    deleteFlower(row){
      FlowerApi.deleteFlower(row.id)
        .then(response =>{
          this.$message({
            message:'删除成功',
            type:'success'
          })
          //刷新页面数据
          this.getFlowerList(1)
        })

    },
    //显示图片
    showPhoto(row){
      this.dialogVisible1 = true
      FlowerApi.showPicture(row.id)
        .then(response =>{
          this.urls = response.data
          // console.log(response)
        })
    },
    // 上传图片的方法
    uploadPhoto(param) {

      const data = new FormData()
      data.append('id', this.flowerId)
      data.append("file", param.file)
      // todo  暂时不用
      // FlowerApi.handlePicture(data)
    },
    //移除上传的图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
      // todo 移除图片的调用api
    },
    //详细显示上传的图片
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
      // console.log(this.dialogImageUrl)
    },
    // 上传图片
    addPhoto(row){
      this.picture = true
      // row.id 为当前行的数据库id
      this.flowerId = row.id
      // todo 显示当前行商品的图片
    },
    //提交添加商品表单
    onSubmit() {
        FlowerApi.addFlower(this.flower1)
        .then(response =>{
          this.$message({
            message:'添加成功',
            type:'success'
          })
          //刷新添加后的页面数据
          this.getFlowerList(1)
          this.drawer= false
        })
    },
    //element关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 搜索方法
    getFlowerInfo(){
      // console.log(this.input)
      FlowerApi.findFlower(this.input)
        .then(response =>{
          this.tableData  = response.data
        })
    },
    // 点击分页标签调用的方法
    handleCurrentChange(val){
      // 获取当前点击的页码
      this.currentpage = val
    //   调用获取花的商品列表的接口
      this.getFlowerList(val)
    },
    // 获取花的商品列表
    getFlowerList(currentPage) {
      FlowerApi.getFlowerList(currentPage)
        .then(response =>{
          // console.log(response)
          this.tableData = response.data.records
          this.total = response.data.total
          // console.log(this.tableData)
        })
    },
    // 颜色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.app{
  padding: 10px 40px 10px 40px
}
.header{
  display: flex;
  justify-content: space-between;
}
</style>
